<template>
  <div class="scenics">
    <div class="banner"></div>
    <!-- 面包屑导航 -->
    <breadcrumb></breadcrumb>
    <div class="detailed-box" v-for="item in list" :key="item.scenic_id">
      <h2> {{ item.name }} </h2>
      <div class="detailed">
        <div class="det-left">
          <img :src="require(`@/assets/images/${item.det_pic}`)" alt="">
        </div>
        <div class="det-right">
          <h5>基本信息</h5>
          <ul>
            <li>
              <p>开放时间</p>
              <span>{{ item.time }} </span>
            </li>
            <li>
              <p>门票价格</p>
              <span>{{ item.price }}</span>
            </li>
            <li>
              <p>景区电话</p>
              <span>{{ item.phone }}</span>
            </li>
          </ul>
          <p>景区官网： <span>{{ item.website }}</span></p>
          <p>景区地址： <span>{{ item.place }}</span></p>
        </div>
      </div>
      <div class="detailed-cont">
        <h5>景区简介</h5>
        <div class="content">
          <!-- <p v-for="(infoItem,index) in item.info" :key="index">
            {{ infoItem }}
          </p> -->
          <p>{{ item.info }} </p>
        </div>
        <h5 v-if="item.history">历史沿革</h5>
        <div class="content" v-if="item.history">
          <!-- <p v-for="(hisItem,index) in item.history" :key="index">
            {{ hisItem }}
          </p> -->
          <p>{{ item.history }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getSceData()
  },

  methods: {
    getSceData() {
      this.$axios
        .get('/data/scenic.json')
        .then((response) => {
          let { status, data } = response
          if (+status !== 200) return
          let sceId = this.$route.query.id
          this.list = data.filter((item) => {
            return item.scenic_id == sceId
          })
        })
        .catch((error) => {
          console.log(error)
        })

      // Object.assign(
      //   this.list,
      //   ...data.filter((item) => {
      //     return item.id == sceId
      //   })
      // )
    }
  }
}
</script>

<style scoped>
.banner {
  width: 100%;
  height: 50vh;
  background: url(../assets/images/banner2.png) no-repeat;
  background-size: cover;
}
.scenics {
  background: #f5f5f5;
  box-shadow: 2px 2px 3px #eeeeee;
  overflow: hidden;
}
.detailed-box {
  max-width: 1200px;
  margin: 0 auto;
  margin: 30px auto;
  padding: 0px 10px 10px;
  background-color: #fff;
  box-shadow: 2px 2px 3px #eeeeee;
}
.detailed-box h2 {
  padding: 20px 0;
  font-size: 25px;
  font-weight: normal;
}
.detailed {
  height: 400px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  overflow: hidden;
}
.detailed .det-left {
  width: 50%;
  overflow: hidden;
}
.detailed .det-left img {
  width: 100%;
  min-height: 400px;
}
.detailed .det-right {
  width: 49.5%;
  background: brown;
  color: #f5f5f5;
  padding-left: 5%;
  padding-top: 20px;
}
.detailed .det-right > h5 {
  font-size: 20px;
  font-weight: normal;
  padding: 20px 0;
}
.detailed .det-right > ul {
  overflow: hidden;
  padding: 20px 0;
}
.detailed .det-right > ul > li {
  float: left;
  width: 30%;
  padding-left: 3%;
  border-left: 1px solid #ff9696;
}
.detailed .det-right > ul > li p {
  font-size: 17px;
}
.detailed .det-right > ul > li span {
  font-size: 15px;
  line-height: 40px;
}
.detailed .det-right > p {
  line-height: 35px;
}
.detailed-cont {
  margin-top: 30px;
}
.detailed-cont h5 {
  display: inline-block;
  padding: 2px 15px;
  background: brown;
  color: #f5f5f5;
  font-weight: normal;
}
.detailed-cont .content {
  border-top: 2px solid brown;
  padding-top: 30px;
  margin-bottom: 30px;
}
.detailed-cont .content p {
  text-indent: 2em;
  line-height: 30px;
}
/* 移动端样式 */
@media screen and (max-width: 767px) {
  .banner {
    display: none;
  }
  .detailed-box {
    margin: 20px 10px 0;
  }
  .detailed-box h2 {
    padding: 2vw 0 3vw 2vw;
    font-size: 15rem;
  }
  .detailed-box .detailed {
    height: 90vw;
  }
  .detailed-box .detailed .det-left {
    width: 95%;
    height: 50%;
    border-bottom: 1px solid #eee;
  }
  .detailed-box .detailed .det-left img {
    min-height: auto;
  }
  .detailed-box .detailed .det-right {
    width: 95%;
    height: 50%;
  }
  .detailed-box .detailed .det-right > h5 {
    padding: 2vw 0;
    font-size: 12rem;
  }
  .detailed-box .detailed .det-right > ul {
    padding: 2vw 0;
  }
  .detailed-box .detailed .det-right > ul > li p {
    font-size: 10rem;
  }
  .detailed-box .detailed .det-right > ul > li span {
    font-size: 8rem;
    line-height: 5vw;
  }
  .detailed-box .detailed .det-right > p {
    font-size: 10rem;
    line-height: 6vw;
  }
  .detailed-box .detailed-cont .content p {
    line-height: 5vw;
  }
}
</style>